<template>
  <view class="container">
    <div class="mt-4">
      <el-input
        v-model="question"
        style="max-width: 600px; color: #fff"
        class="input-with-select"
        @keyup.enter="btn"
      >
        <template #append>
          <el-button :loading="loading" :icon="Refresh" @click="btn" />
        </template>
      </el-input>
    </div>
    <div class="content">
      {{ text }}
    </div>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { Refresh } from "@element-plus/icons-vue";
import search from "../api";

import ollama from "ollama";
const text = ref("");
const question = ref("");
const loading = ref(false);

async function btn() {
  try {
    loading.value = true;
    const response = await ollama.chat({
      model: "qwen2:7b",
      messages: [
        {
          role: "system",
          content:
            "你是一个中英互译器，如果用户输入的是英文就翻译成中文，中文就翻译成英文，尽量精简，不要输出多余的词",
        },
        { role: "user", content: question.value },
      ],
    });
    text.value = response.message.content;
  } catch (error) {
    console.error("Translation failed:", error);
    text.value = "Translation failed.";
  } finally {
    loading.value = false; // 停止加载动画
  }
}
</script>

<style scoped>
.container {
  color: #fff;
}
::v-deep .el-input {
  border: none;
  border-radius: 100px;
  background-color: transparent;
  box-shadow: none;
  padding: 0;

  margin: 10px;
}

::v-deep .el-input,
.el-input-group,
.input-with-select,
.el-input-group--append {
  --el-fill-color-blank: transparent;
  --el-color-primary: #fff;
  --el-text-color-regular: #fff;
}
</style>
